<template>
    <mu-appbar style="position:fixed;
               top:0;
               width: 100%;
               height: 8vh"
               color="primary"
               :title="title">
        <mu-button icon
                   slot="left"
                   :to="to"
                   v-if="to!=null">
            <mu-icon value="chevron_left">
            </mu-icon>
        </mu-button>
        <mu-button icon
                   slot="left"
                   v-if="more"
                   v-on:click="$emit('openLeftPanel')">
            <mu-icon value="more_vert">
            </mu-icon>
        </mu-button>
        <mu-button
                icon
                slot="right"
                v-if="menu!=null"
                v-on:click="$emit('openMenu')">
            <mu-icon
                    value="menu">
            </mu-icon>
        </mu-button>
    </mu-appbar>
</template>

<script>
    export default {
        name: "TopBar",
        props: {
            to: String,
            title: String,
            menu: String,
            more: Boolean
        },
        data() {
            return {
                color: 'primary'
            }
        },
        methods: {}
    }
</script>

<style scoped>

</style>